<template>
  <div class="task-container">
    <div class="title-container">
      <div class="title">
        <div class="first">天天做任务赚翻租币</div>
        <div class="second">
          已获得 <span>{{ 1111 }}</span> 个租币，租币可兑换商品
        </div>
      </div>
      <div class="cancle">
        <svg
          t="1719278961922"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5105"
          width="32"
          height="32"
        >
          <path
            d="M512.268258 130.418417c-210.405363 0-381.581583 171.175196-381.581583 381.581583 0 210.405363 171.17622 381.580559 381.581583 381.580559s381.581583-171.17622 381.581583-381.580559c-0.001024-210.405363-171.17622-381.581583-381.581583-381.581583z m0 727.389636c-190.678164 0-345.808053-155.128866-345.808054-345.808053s155.128866-345.808053 345.808054-345.808053 345.808053 155.128866 345.808053 345.808053c0 190.678164-155.129889 345.808053-345.808053 345.808053zM652.381845 630.389812c6.984946 6.986993 6.984946 18.310141 0 25.297135a17.840178 17.840178 0 0 1-12.649079 5.238197c-4.576767 0-9.155583-1.746748-12.649079-5.238197L507.353608 535.955845 384.126962 659.182492a17.840178 17.840178 0 0 1-12.64908 5.238197c-4.576767 0-9.155583-1.746748-12.649079-5.238197-6.984946-6.986993-6.984946-18.310141 0-25.297135l123.226647-123.226647-114.671061-114.673108c-6.984946-6.986993-6.984946-18.310141 0-25.297135 6.986993-6.981874 18.310141-6.981874 25.297135 0l114.672084 114.672085 116.358424-116.358424c6.986993-6.981874 18.310141-6.981874 25.297135 0 6.984946 6.986993 6.984946 18.310141 0 25.297134L532.651767 510.65871 652.381845 630.389812z"
            fill="#e6e6e6"
            p-id="5106"
          ></path>
        </svg>
      </div>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="new">新人专享</div>
        <div class="item-container">
          <div v-for="item in itemList1" class="item">
            <div class="left">
              <img src="../assets/11.png" width="48" height="48" />
              <div class="left-text">{{ item.val }}</div>
            </div>
            <div
              class="right"
              :class="{ 'right-active': item.rent === '已完成' }"
              @click.stop="getRent(item)"
            >
              {{ item.rent }}
            </div>
          </div>
        </div>
      </div>
      <div class="content-item">
        <div class="new">每天逛逛</div>
        <div class="item-container">
          <div v-for="item in itemList2" class="item">
            <div class="left">
              <img src="../assets/11.png" width="48" height="48" />
              <div class="left-text">{{ item.val }}</div>
            </div>
            <div
              class="right"
              :class="{ 'right-active': item.rent === '已完成' }"
              @click.stop="getRent(item)"
            >
              {{ item.rent }}
            </div>
          </div>
        </div>
      </div>
      <div class="getTip">
        <div class="tip-content" ref="tipRef">
          <div class="left">
            <img src="../assets/12.png" width="36" height="36" />
            <div class="text">
              <div class="top">恭喜获得20个租币</div>
              <div class="buttom">任务完成</div>
            </div>
          </div>
          <div class="right"><span>+10</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
interface taskItem {
  val: string;
  rent: string;
}
const itemList1 = ref<taskItem[]>([]);
const itemList2 = ref<taskItem[]>([]);
for (let i = 0; i < 2; i++) {
  itemList1.value.push({
    val: "收藏人人租机小程序",
    rent: `+${(i + 1) * 10}租币`,
  });
}
for (let i = 0; i < 4; i++) {
  itemList2.value.push({
    val: "收藏人人租机小程序",
    rent: `+${(i + 1) * 10}租币`,
  });
}

const tipRef = ref<HTMLDivElement | null>(null);
const getRent = (item: taskItem) => {
  if (item.rent === "已完成") return;
  item.rent = "已完成";
  tipRef.value?.classList.add("active");
  setTimeout(() => {
    tipRef.value?.classList.remove("active");
  }, 2000);
};
</script>

<style lang="scss" scoped>
@mixin flexBox($jc-value: center, $ac-value: center) {
  display: flex;
  justify-content: $jc-value;
  align-items: $ac-value;
}

.task-container {
  width: 100%;
  height: calc(100% - 50px - 30px);
  margin-top: 30px;
  box-sizing: border-box;

  .title-container {
    height: 100px;
    border-radius: 24px 24px 0px 0px;
    position: relative;
    @include flexBox();
    background: linear-gradient(147deg, #7ad38c 0%, #40cbbe 100%);
    .title {
      @include flexBox();
      flex-direction: column;
      .first {
        padding: 5px 0px;
        color: #fff;
        font-size: 24px;
      }
      .second {
        color: #fff;
        span {
          color: yellow;
          font-size: 18px;
        }
      }
    }

    .cancle {
      position: absolute;
      top: 20px;
      right: 10px;
      width: 48px;
      height: 48px;
    }
  }

  .content {
    height: calc(100% - 100px);
    background-color: #e9faf4;

    .content-item {
      padding: 0px 10px;
    }

    .new {
      height: 40px;
      padding: 10px;
      color: #133c37;
      font-size: 16px;
      font-weight: 600;
      box-sizing: border-box;
    }

    .item-container {
      width: 100%;
      @include flexBox();
      flex-direction: column;

      .item {
        width: calc(100% - 20px);
        height: 80px;
        padding: 0px 15px;
        margin: 5px 0px;
        border-radius: 8px;
        box-sizing: border-box;
        @include flexBox(space-between);
        background: #fff;

        .left {
          @include flexBox(space-between);

          .left-text {
            padding-left: 10px;
          }
        }

        .right {
          height: 30px;
          padding: 0px 10px;
          border: 1px orange solid;
          border-radius: 20px;
          cursor: pointer;
          color: orange;
          @include flexBox(space-between);
        }

        .right-active {
          height: 30px;
          padding: 0px 10px;
          border: 1px #ddd solid;
          border-radius: 20px;
          cursor: pointer;
          color: #ddd;
          @include flexBox(space-between);
        }
      }
    }

    .getTip {
      @include flexBox();

      .tip-content {
        width: calc(100% - 40px);
        height: 65px;
        padding: 0px 20px;
        position: fixed;
        bottom: -100px;
        box-sizing: border-box;
        border-radius: 5px;
        color: #fff;
        transition: bottom 0.5s linear;
        background-color: rgba(0, 0, 0, 0.72);

        @include flexBox(space-between);

        .left {
          @include flexBox(space-between);

          .text {
            padding-left: 10px;
          }
        }
      }

      .active {
        bottom: 45px;
      }
    }
  }
}
</style>
